<template>
	<view class="container">
		<!-- <image-cropper @on-crop-change="cropChangeCallback" @on-close="closeCropCallback" v-if="cropVisiable" :src="tempCropImgFile" :size="size"></image-cropper> -->
		<view class="content">
			<view class="list">
				<uni-list>
					<uni-list-item title="头像" :hide-hover="true" @click="choose_image">
						<template v-slot:right="">
							<view class="avatar">
								<image :src="userData.avatar ? userData.avatar : '/static/img/public/avatar.png'" ></image>
							</view>
						</template>
					</uni-list-item>
					<uni-list-item title="昵称" :hide-hover="true">
						<template v-slot:right="">
							<input class="picker-item" style="text-align: right;" type="text" placeholder="请输入昵称" v-model="userData.name" />
						</template>
					</uni-list-item>
					<uni-list-item title="性别" :hide-hover="true">
						<template v-slot:right="">
							<picker @change="bindPickerChange_gender" :value="gender_index" :range="gender_array">
								<view class="picker-item" :class="{ noactive: gender_array[gender_index] == '请选择性别' }">{{ gender_array[gender_index] }}</view>
							</picker>
						</template>
						
					</uni-list-item>
					<uni-list-item title="爱好" :hide-hover="true">
						<template v-slot:right="">
							<picker @change="bindPickerChange_hobby" :value="hobby_index" :range="hobby_array">
								<view class="picker-item" :class="{ noactive: hobby_array[hobby_index] == '请选择爱好' }">{{ hobby_array[hobby_index] }}</view>
							</picker>
						</template>
						
					</uni-list-item>
					<uni-list-item title="生日" :hide-hover="true">
						<template v-slot:right="">
							<picker @change="bindTimeChange" mode="date" :class="{ active: userData.age != '请选择日期' }" :value="userData.age" :start="starttime" :end="endtime">
								<view class="uni-input picker-item">{{ userData.age }}</view>
							</picker>
						</template>
						
					</uni-list-item>
					<uni-list-item title="地区" :hide-hover="true" :right-text="userData.region.label" @tap="chooseCity"></uni-list-item>
					<uni-list-item title="个性签名" :hide-hover="true" :show-arrow="false"></uni-list-item>
					<textarea placeholder="向大家介绍自己把" v-model="userData.introduction" />
				</uni-list>
				<!-- <view class="row">
					<view class="title">头像</view>
					<view class="right" @click="choose_image">
						<view class="tis">
							<image :src="userData.avatar?userData.avatar:'/static/img/public/avatar.png'" mode="widthFix"></image>
						</view>
						<view class="yticon icon-you"></view>
					</view>
				</view>
				<view class="row">
					<view class="title">昵称</view>
					<view class="right">
						<view class="tis"><input type="text" placeholder="请输入昵称" v-model="userData.name" /></view>
						<view class="yticon icon-you"></view>
					</view>
				</view>
				<view class="row">
					<view class="title">性别</view>
					<view class="right">
						<picker class="d01" @change="bindPickerChange_gender" :value="gender_index" :range="gender_array">
							<view class="d01" :class="{ noactive: gender_array[gender_index] == '请选择性别' }">{{ gender_array[gender_index] }}</view>
						</picker>
						<view class="yticon icon-xia"></view>
					</view>
				</view>
				<view class="row">
					<view class="title">爱好</view>
					<view class="right">
						<picker class="d01" @change="bindPickerChange_hobby" :value="hobby_index" :range="hobby_array">
							<view class="d01" :class="{ noactive: hobby_array[hobby_index] == '请选择爱好' }">{{ hobby_array[hobby_index] }}</view>
						</picker>
						<view class="yticon icon-xia"></view>
					</view>
				</view>
				<view class="row">
					<view class="title">生日</view>
					<view class="right">
						<picker class="d01" mode="date" :class="{ active: userData.age != '请选择日期' }" :value="userData.age" :start="starttime"
						 :end="endtime" @change="bindTimeChange">
							<view class="uni-input">{{ userData.age }}</view>
						</picker>
						<view class="yticon icon-xia"></view>
					</view>
				</view>
				<view class="row">
					<view class="title">地区</view>
					<view class="right" @tap="chooseCity">
						<view class="input">
							{{userData.region.label}}
						</view>
						<view class="yticon icon-xia"></view>
					</view>
				</view>
				<view class="row" >
					<view class="title">个性签名</view>
					<view class="right">
						<view class="tis">{{userData.introduction}}</view>
						<view class="yticon icon-xia" @tap='signature'></view>
					</view>
				</view>
				<view class="row" v-if="isShow" >
					<view class="signature">
						<input placeholder="请输你的个性签名" v-model="userData.signature"/>
					</view>
					
				</view> -->
				<button class="add-btn" @click="save">保存</button>
			</view>
		</view>
		<mpvue-city-picker :themeColor="themeColor" ref="mpvueCityPicker" :pickerValueDefault="cityPickerValue" @onCancel="onCancel"
		 @onConfirm="onConfirm"></mpvue-city-picker>
	</view>
</template>

<script>
	import {
		mapMutations
	} from 'vuex';
	import Api from '@/common/api';
	import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue'
	import uniList from "@/components/uni-list/uni-list.vue"
	import uniListItem from "@/components/uni-list-item/uni-list-item.vue"
	// import imageCropper from "@/components/simple-crop/simple-crop.vue"
	// import { compressImage } from '@/utils/file.js'
	
	import {
		formatDate
	} from '@/common/date.js';

	export default {
		components: {
			mpvueCityPicker,
			uniList,
			uniListItem
			// imageCropper
		},
		data() {
			return {
				imgsrc: Api.imgsrc,
				imgIcon: Api.imgIcon,
				size: {
				  width: 400,
				  height: 400
				},
				userData: {
					"avatar": null,
					"name": "",
					"wx_openid": "",
					"sex": null,
					"hobby": null,
					"age": null,
					"province": null,
					"city": null,
					"district": null,
					"introduction": null,
					"signature": null,
					"region": {
						"label": '请点击选择地址',
						"value": [],
						"cityCode": ""
					},
				},
				cropVisiable: false, //展示裁剪
				tempCropImgFile: null, //裁剪图片
				gender_index: 0,
				gender_array: ['请选择性别', '男', '女'],
				hobby_index: 0,
				hobby_array: ['请选择爱好', '无肉不欢', '养身美容', '家庭煮妇', '素食清淡', '运动达人', '随便主义', '孕妇婴幼', '西式料理', '家有老人', '低价促销', '专业吃货',
					'品质生活'
				],
				cityPickerValue: [0, 0, 1],
				themeColor: '#FFBC21',
				starttime: '1949-01-01',
				endtime: '',
				isShow: false,
			};
		},
		onLoad(options) {
			this.endtime = formatDate(new Date(), 'yyyyMMdd');
			this.getUserInfo();
		},
		methods: {
			...mapMutations(['login']),
			lock_tip() {
				uni.showToast({
					title: '不可修改',
					icon: 'none'
				});
			},
			// signature() {
			// 	this.isShow = !this.isShow;
			// },
			async getUserInfo() {
				let params = {},
					data = await Api.apiCall('POST', Api.index.userInfo, params);
				if (data) {
					let label = "请点击选择地址";
					// var city_value = [];
					// let city_code = "";
					if (data.district) {
						label = data.province + "-" + data.city + "-" + data.district;
						// var cityValue = data.city_value ? data.city_value.split(',') : null;
						// for(var iLoop in cityValue){
						// 	city_value.push(parseInt(cityValue[iLoop]));
						// }
						let cityValue = data.city_value ? data.city_value.split(',').map(e => {
							return Number(e)
						}) : null;

						// city_code = ;
						this.cityPickerValue = cityValue;
						this.userData.region.label = label;
						this.userData.region.value = cityValue;
						this.userData.region.cityCode = data.city_code;
					}
					// data.avatar.includes("http") true 字符串是以http开头的！
					// data.avatar.includes("http") false 字符串不是以http开头的！
					this.userData.avatar = data.avatar ? (data.avatar.includes('http') ? data.avatar : this.imgIcon + data.avatar) :
						'/static/img/public/avatar.png';
					this.userData.wx_openid = data.wx_openid;
					this.userData.name = data.name;
					this.userData.sex = data.sex;
					this.userData.hobby = data.hobby;
					this.userData.age = data.age || '请选择日期';
					this.userData.province = data.province;
					this.userData.district = data.district;
					this.userData.city = data.city;
					this.userData.introduction = data.introduction;
					this.gender_index = data.sex != null ? parseInt(data.sex) + 1 : 0;
					this.hobby_index = data.hobby ? this.hobby_array.findIndex(item => {
						return item == data.hobby
					}) : 0;
				}

			},
			closeCropCallback(){
				this.cropVisiable = false;
			},
			cropChangeCallback(e){
				console.log(e)
			},
			onCancel(e) {
				console.log(e)
			},
			chooseCity() {
				this.$refs.mpvueCityPicker.show()
			},
			onConfirm(e) {
				this.userData.region = e;
				this.cityPickerValue = e.value;
				var array = e.label.split('-');
				this.userData.province = array[0];
				this.userData.city = array[1];
				this.userData.district = array[2];
				this.userData.cityValue = e.value.toString();
				this.userData.cityCode = e.cityCode;
			},
			choose_image() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						let filePath = res.tempFilePaths[0];
						this.userData.avatar = filePath;
						//上传头像
						
						this.uploadFile(filePath);
						// // #ifdef H5
						// compressImage({
						//   file: res.tempFiles[0],
						//   type: 'image/jpeg',
						//   quality: 0.9,
						//   size: 256000,
						//   length: 1000
						// }).then(src => {
						//   this.tempCropImgFile = src;
						//   this.cropVisiable = true;
						// })
						// // #endif
						// // #ifndef H5
						// this.$nextTick(()=>{
						// 	this.tempCropImgFile = res.tempFilePaths[0];
						// 	this.cropVisiable = true;
						// });
						// // #endif
					}
				});
			},
			// 选择性别
			bindPickerChange_gender(e) {
				this.gender_index = e.detail.value;
			},
			//选择爱好
			bindPickerChange_hobby(e) {
				this.hobby_index = e.detail.value;
			},
			//选择生日
			bindTimeChange(e) {
				// this.nowdate = e.target.value;
				this.userData.age = e.target.value;
				console.log(this.userData.age)
			},
			async uploadFile(filePath) {
				// 上传用户头像
				var params = {}
				let data = await Api.apiUploadFileCall('post', Api.index.uploadFile, filePath, params);
				if (data) {
					this.userData.avatar = this.imgIcon + data.avatar;
				}
			},
			//提交
			async save() {
				if (!this.userData.name) {
					this.$api.msg('请填写昵称');
					return;
				}
				if (this.gender_index == 0) {
					uni.showToast({
						title: '请选择性别',
						icon: 'none'
					});
					return false;
				}
				let params = {
					'name': this.userData.name,
					'sex': this.gender_index - 1,
					'age': this.userData.age,
					'hobby': this.hobby_array[this.hobby_index],
					'province': this.userData.province,
					'city': this.userData.city,
					'district': this.userData.district,
					'city_value': this.userData.cityValue,
					'city_code': this.userData.cityCode,
					'introduction': this.userData.introduction,
				};
				//编辑保存
				let result = await Api.apiCall('put', Api.index.userInfo, params);
				if (result) {
					var userInfo = uni.getStorageSync('userInfo');
					userInfo.name = this.userData.name;
					userInfo.avatar = this.userData.avatar;
					this.login(userInfo); //保存登录缓存

					uni.navigateBack();
				}


			}

		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FAFAFA;
	}
	textarea{
		box-sizing: border-box;
		width: 100%;
		height: 150upx;
		font-size: 26upx;
		padding: 0 30upx 20upx;
		border-bottom: .5upx solid #f3f5f7;
	}

	.yticon {
		font-size: 40upx;

	}

	.picker-item {
		// position: absolute;
		// right: 60upx;
		font-size: 28upx;
		color: #999;
	}

	.icon-xia {
		font-size: 50upx;
	}

	.content {
		padding-bottom: 20upx;
		// border-top: solid 1upx #dedede;
		display: flex;
		flex-flow: column wrap;
		align-items: center;

		.list {
			width: 100%;
			// padding-left: 4%;
			background-color: #fff;
			margin-bottom: 20upx;

			// 	.row {
			// 		widows: 100%;
			// 		min-height: 90upx;
			// 		display: flex;
			// 		align-items: center;
			// 		justify-content: space-between;
			// 		border-bottom: solid 1upx #eee;

			// 		&:last-child {
			// 			border-bottom: none;
			// 		}

			// 		.title {
			// 			font-size: 32upx;
			// 			color: #333;
			// 		}

			// 		.right {
			// 			display: flex;
			// 			align-items: center;
			// 			color: #999;

			// 			.tis {
			// 				font-size: 32upx;
			// 				margin-right: 5upx;
			// 				max-height: 120upx;

			// 				image {
			// 					width: 100upx;
			// 					height: 100upx;
			// 					border-radius: 100%;
			// 					margin: 10upx 0;
			// 				}
			// 			}

			// 			.d01 {
			// 				width: 100%;
			// 				line-height: 100upx;
			// 				height: 100upx;
			// 				text-align: right;
			// 				justify-content: flex-end;
			// 				padding-right: 20upx;
			// 				font-size: 32upx;
			// 			}

			// 			.input {
			// 				font-size: 32upx;
			// 				padding-right: 20upx;
			// 			}

			// 			.yticon {
			// 				width: 40upx;
			// 				color: #cecece;
			// 			}

			// 			.icon-xia {
			// 				margin-right: 20upx;
			// 				margin-top: 20upx;
			// 				align-items: center;
			// 			}
			// 		}
			// 		.signature {
			// 			width: 100%;
			// 			height:88upx;
			// 			margin-right: 4%;
			// 			display: flex;
			// 			align-items: center;
			// 			border-radius: 24upx;
			// 			border: 1upx solid #E1E4E5;
			// 			box-shadow: 0upx 1upx 0upx rgba($color: #E1E4E5, $alpha: 0.7);
			// 			input {
			// 				width: 100%;
			// 				height: 50upx;
			// 				padding-left: 32upx;
			// 				// color: rgba($color: #ACADAE, $alpha: 0.1);
			// 				color: #ACADAE;
			// 				font-weight: 300;
			// 			}
			// 		}
			// 	}

		}

		.avatar {
			width: 100upx;
			height: 100upx;
			border-radius: 50%;
			overflow: hidden;
			// margin: 10upx 0;
			image{
				width: 100%;
				height: 100%;
			}
		}

		.add-btn {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 690upx;
			height: 80upx;
			margin-top: 60upx;
			font-size: $font-lg;
			color: #fff;
			background-color: #FFBC21;
			border-radius: 40upx;
			// box-shadow: 1px 2px 5px rgba(255, 188, 33, 0.4);
			&::after{
				content: unset;
			}
		}
	}
</style>
